<template>
  <el-input v-bind="$attrs" v-on="$listeners">
    <el-component-wrap v-for="(item, i) in slots" :key="getKey(item.COM, i)" :slot="item.slot" :c-o-m="item.COM" v-bind="item.COM.props" v-on="item.COM.events" />
  </el-input>
</template>

<script>
import { isNotEmpty } from '@/utils/validate'
import ElComponentWrap from '@/components/Typography/Wrap/ElComponentWrap'

export default {
  name: 'ElInputWrap',
  components: { ElComponentWrap },
  props: {
    slots: {
      type: Array,
      default: function() {
        /*
        {
          slot: 'prefix | suffix | prepend | append',
          COM: {}
        }
        */
        return []
      }
    }
  },
  computed: {
    props: function() {
      return this.COM.props
    },
    events: function() {
      return this.COM.events
    }
  },
  methods: {
    getKey(item, index) {
      const tag = item.tag
      const name = item.name
      let key = 'el-input-wrap-' + tag
      if (isNotEmpty(name)) {
        key += ('-' + name)
      }
      key += index
      return key
    }
  }
}
</script>
